<template>

  <div class="related-movies" v-if="formattedMovieRelatedMovies.length > 0">

    <header class="title">相关影片</header>


    <ul class="movies">
      <li class="content" v-for="(movie, index) in formattedMovieRelatedMovies" :key="index"
        @click="gotoDetail(movie.id)">
        <img :src="movie.img" :alt="movie.title">
        <p class="title">{{ movie.title }}</p>
      </li>

    </ul>





  </div>




</template>





<script setup>
import { updateMovieRelatedMoviesImageUrl } from "@/tools/index.js"
import { computed } from "vue";

import { useRouter } from "vue-router";
const router = useRouter();


const props = defineProps({

  movieRelatedMovies: {
    type: Array,

  }
});



const formattedMovieRelatedMovies = computed(() => {

  return props.movieRelatedMovies.map(movie => {
    if (movie.img) {
      movie.img = updateMovieRelatedMoviesImageUrl(movie.img);
    }
    return movie;
  });
});

const gotoDetail = (movieId) => {

  router.push({ path: `/movie/${movieId}` })
};






</script>



<style scoped>
.related-movies {
  margin-top: 10px;
  padding: 0 10px;
  background-color: #fff;
}

.related-movies .title {
  font-size: 15px;
  color: #333;
  padding: 10px 0;
}

.movies {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* IE 和 Edge  隐藏滚动条 */
  scrollbar-width: none;
  /* Firefox 隐藏滚动条*/
}

.movies::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari 和 Opera 隐藏滚动条 */
}



.content {
  cursor: pointer;
  margin-right: 10px;
  text-align: center;
  width: 96px;
  height: auto;
}

.content img {
  display: block;
  text-align: center;
  width: 96px;
  height: 134px;
}

.content .title {
  width: 100%;
  text-align: center;
  font-size: 15px;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 5px;
}
</style>
